<template>
    <div>
        <!-- tagview -->
        <ul class="tag">
            <li v-for="(item,index) in arr" @contextmenu.prevent="test($event,index)">
                <i class="el-icon-close closer" v-show="arr.length == 1"></i>

                <span>{{item.meta.title}}</span><i class="el-icon-close close" v-if="arr.length !==1" @click.stop.prevent="del(index)"></i>
            </li>
        </ul>
        <div class="drowdown" v-if="drowDown" :style="{left:x - 210 +'px',top:y+'px'}">
            <div class="drowdown-item" @click="refresh">刷新</div>
            <div class="drowdown-item" @click="closeRight('right')">关闭右侧</div>
            <div class="drowdown-item" @click="closeOuther('outher')">关闭其他</div>
        </div>
    </div>
</template>

<script>
export default {
 name : "", 
 data(){
  return {
      selectIndex:'',
      x:'',
      y:'',
      drowDown:false,
      arr : [
          {
              path : "/profile",
              name : "profile",
              meta : {
                  title : "个人中心"
              }
          },
          {
              path : "/profile",
              name : "profile",
              meta : {
                  title : "员工管理"
              }
          },
          {
              path : "/profile",
              name : "profile",
              meta : {
                  title : "角色管理"
              }
          },
          {
              path : "/profile",
              name : "profile",
              meta : {
                  title : "权限管理"
              }
          },
          {
              path : "/profile",
              name : "profile",
              meta : {
                  title : "文章管理"
              }
          }
      ]
  }
 },
 watch:{
     drowDown :function(newValue){
         console.log(newValue);
         let that = this;
         if(newValue){
             document.body.addEventListener('click',function() {
                 that.closeMenu()
             })
         }else{
             document.body.removeEventListener('click',that.closeMenu)
         }
     }
 },
 methods:{
     del(i){
         this.arr.splice(i,1)
     },
     refresh(){
         this.drowDown = false
         this.$router.go(0)
     },
     closeMenu(){
         this.drowDown = false;
     },
     removeArr(type,i){
         console.log(type,i);
         if(type=='right'){
            this.arr.splice(i+1)
            this.drowDown = false;
         }
         if(type=="outher"){
            this.arr.splice(0,i)
            this.arr.splice(1)
            this.drowDown = false;

         }
     },
     test(e,i){
         this.drowDown = true;
         this.x = e.clientX;
         this.y = e.clientY;
         this.selectIndex = i
     },
     closeRight(type){
         this.removeArr(type,this.selectIndex)
     },
    closeOuther(type){
         this.removeArr(type,this.selectIndex)
     }
 },
}
</script>


<style lang="scss" scoped>
.tag {
  display: flex;
  list-style: none;
  li {
    cursor: pointer;
    border: 1px solid #333;
    padding: 5px 5px;
    font-size: 12px;
    margin: 0 10px 0 0;
    position: relative;
    .closer {
      border-radius: 50%;
      font-size: 10;
      margin: 0 5px 0 0;
      background-color: #333;
    }
    .close {
      border-radius: 50%;
      padding: 2px;
      margin: 0 0 0 5px;
      &:hover {
        background-color: skyblue;
      }
    }
  }
}
.drowdown {
  cursor: pointer;
  position: absolute;
  background-color: #fff;
  //   left: 20px;
  //   top: 104px;
  border: 1px solid gray;
  width: 70px;
  padding: 3px 0;
  .drowdown-item {
    font-size: 12px;
    padding: 5px;
    &:hover {
      background: gray;
    }
  }
}
</style>